import { Message, Modal, Notification } from "@arco-design/web-react";
import React, { type PropsWithChildren } from "react";
import { AppContext, useApp, type useAppProps } from "./context";

function App_({ children }: PropsWithChildren) {
  const [messageApi, messageContextHolder] = Message.useMessage();
  const [notificationApi, notificationContextHolder] = Notification.useNotification();
  const [modalApi, modalContextHolder] = Modal.useModal();

  const memoizedContextValue = React.useMemo<useAppProps>(() => ({
    message: messageApi,
    notification: notificationApi,
    modal: modalApi,
  }), [messageApi, notificationApi, modalApi]);

  return <AppContext.Provider value={memoizedContextValue}>
    {modalContextHolder}
    {messageContextHolder}
    {notificationContextHolder}
    {children}
  </AppContext.Provider>
}

type CompoundedComponent = typeof App_ & { useApp: typeof useApp };

const App = App_ as CompoundedComponent;
App.useApp = useApp;

export default App;
